@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-noto-sans: 'Noto Sans', sans-serif;
}

body {
  font-family: var(--font-noto-sans);
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    /* --border: 0 0% 89.8%; */
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --primary-50: #fffeee;
    --primary-100: #fffbc9;
    --primary-200: #fff9af;
    --primary-300: #fef68b;
    --primary-400: #fef475;
    --primary-500: #fef152;
    --primary-600: #e7db4b;
    --primary-700: #b4ab3a;
    --primary-800: #8c852d;
    --primary-900: #6b6522;
    --secondary-50: #f5f5f5;
    --secondary-100: #e0e0df;
    --secondary-200: #d1d1d0;
    --secondary-300: #bcbcbb;
    --secondary-400: #afafad;
    --secondary-500: #9b9b99;
    --secondary-600: #8d8d8b;
    --secondary-700: #6e6e6d;
    --secondary-800: #555554;
    --secondary-900: #414140;
    --tertiary-50: #eeeffe;
    --tertiary-100: #cacdfd;
    --tertiary-200: #b1b4fb;
    --tertiary-300: #8d92fa;
    --tertiary-400: #777df9;
    --tertiary-500: #555df7;
    --tertiary-600: #4d55e1;
    --tertiary-700: #3c42af;
    --tertiary-800: #2f3388;
    --tertiary-900: #242768;
    --green-50: #efffee;
    --green-100: #ceffc9;
    --green-200: #b6ffaf;
    --green-300: #94fe8b;
    --green-400: #80fe75;
    --green-500: #60fe52;
    --green-600: #57e74b;
    --green-700: #44b43a;
    --green-800: #358c2d;
    --green-900: #286b22;
    --red-50: #ffeeef;
    --red-100: #ffc9ce;
    --red-200: #ffafb6;
    --red-300: #fe8b94;
    --red-400: #fe7580;
    --red-500: #fe5260;
    --red-600: #e74b57;
    --red-700: #b43a44;
    --red-800: #8c2d35;
    --red-900: #6b2228;
    --orange-50: #fff5ee;
    --orange-100: #ffe0c9;
    --orange-200: #ffd1af;
    --orange-300: #febb8b;
    --orange-400: #feae75;
    --orange-500: #fe9a52;
    --orange-600: #e78c4b;
    --orange-700: #b46d3a;
    --orange-800: #8c552d;
    --orange-900: #6b4122;
    --white: #ffffff;
    --white-50: #fefefe;
    --white-100: #fbfbfb;
    --white-200: #f9f9f9;
    --white-300: #f6f6f6;
    --white-400: #f5f5f5;
    --white-500: #f2f2f2;
    --white-600: #dcdcdc;
    --white-700: #acacac;
    --white-800: #858585;
    --white-900: #666666;
    --black: #000000;
    --black-50: #eaeaeb;
    --black-100: #bdbebf;
    --black-200: #9d9ea1;
    --black-300: #707276;
    --black-400: #54575b;
    --black-500: #292d32;
    --black-600: #25292e;
    --black-700: #1d2024;
    --black-800: #17191c;
    --black-900: #111315;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
